<!DOCTYPE html>
<html>
<head>
    <title>Infinite Resistor Network Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="resistorCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('resistorCanvas');
        const ctx = canvas.getContext('2d');

        // Define main coordinates for the triangle
        const top_vertex = { x: 250, y: 50 };
        const base_y = 350;
        const half_base_width = 180;
        const left_vertex = { x: top_vertex.x - half_base_width, y: base_y }; // A
        const right_vertex = { x: top_vertex.x + half_base_width, y: base_y }; // B
        const total_height = base_y - top_vertex.y;

        // Style for lines
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // Start drawing the network lines
        ctx.beginPath();

        // Draw the main triangle (sides AC and BC)
        ctx.moveTo(left_vertex.x, left_vertex.y);
        ctx.lineTo(top_vertex.x, top_vertex.y);
        ctx.lineTo(right_vertex.x, right_vertex.y);
        
        // Draw the base (AB)
        ctx.moveTo(left_vertex.x, left_vertex.y);
        ctx.lineTo(right_vertex.x, right_vertex.y);

        // Draw the central altitude
        ctx.moveTo(top_vertex.x, top_vertex.y);
        ctx.lineTo(top_vertex.x, base_y);

        // Draw the horizontal dividing lines
        // The image shows 4 horizontal lines, creating 5 vertical sections.
        const num_sections = 5;
        for (let i = 1; i < num_sections; i++) {
            const y = top_vertex.y + (total_height / num_sections) * i;
            const h_from_top = y - top_vertex.y;
            
            // Use similar triangles to find the width at this height
            const current_half_width = half_base_width * (h_from_top / total_height);
            
            const x_left = top_vertex.x - current_half_width;
            const x_right = top_vertex.x + current_half_width;
            
            ctx.moveTo(x_left, y);
            ctx.lineTo(x_right, y);
        }
        
        // Stroke all the lines drawn so far
        ctx.stroke();

        // Draw the four dots at the top to indicate infinite repetition
        ctx.fillStyle = 'black';
        const dot_radius = 1.5;
        const dot_dx = 8;
        const dot_dy1 = 20;
        const dot_dy2 = 30;

        function drawDot(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, dot_radius, 0, 2 * Math.PI);
            ctx.fill();
        }

        drawDot(top_vertex.x - dot_dx, top_vertex.y + dot_dy1);
        drawDot(top_vertex.x - dot_dx, top_vertex.y + dot_dy2);
        drawDot(top_vertex.x + dot_dx, top_vertex.y + dot_dy1);
        drawDot(top_vertex.x + dot_dx, top_vertex.y + dot_dy2);
        
        // Add labels
        ctx.fillStyle = 'black';
        ctx.font = 'italic 22px Times New Roman';
        ctx.textAlign = 'center';

        // Labels for vertices A and B
        ctx.fillText('A', left_vertex.x - 15, base_y + 25);
        ctx.fillText('B', right_vertex.x + 15, base_y + 25);
        
        // Label 'a' for the base segment
        ctx.fillText('a', (left_vertex.x + top_vertex.x) / 2, base_y + 25);
        
        // Labels 'a' on the sides
        // These are on the 3rd segment from the bottom (or 2nd from the top trapezoid)
        // which is between y_line_2 and y_line_3
        const y_mid_segment = top_vertex.y + (total_height / num_sections) * 2.5;
        const h_mid_segment = y_mid_segment - top_vertex.y;
        const half_width_mid_segment = half_base_width * (h_mid_segment / total_height);
        
        const x_left_mid = top_vertex.x - half_width_mid_segment;
        const x_right_mid = top_vertex.x + half_width_mid_segment;

        ctx.textAlign = 'right';
        ctx.fillText('a', x_left_mid - 8, y_mid_segment + 8);
        
        ctx.textAlign = 'left';
        ctx.fillText('a', x_right_mid + 8, y_mid_segment + 8);

    </script>
</body>
</html>